<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="headCont">
        <div class="userImg" v-if="userInfo.user_info">
          <img :src="userInfo.user_info.head_img" />
        </div>
        <div class="userName">
          <div>{{ userInfo.career_path }}</div>
        </div>
        <div class="userDes">
          {{ userInfo.work_address }} · {{ userInfo.work_status }} ·
          {{ getYear(userInfo.date_of_birth) }}岁
        </div>
        <div class="userTag">
          <div class="workNumTag">{{ userInfo.work_experience }}</div>
          <div class="workNumTag">远程</div>
          <div class="workNumTag">驻场</div>
        </div>
        <div class="userDes flexCont">
          <div class="iconfont icon-shijian"></div>
          <div>
            <span :key="b" v-for="(a, b) in userInfo.work_time">
              <span v-if="b > 0">，</span>
              {{ a.name + "(" + a.start_time + "~" + a.end_time + ")" }}</span
            >
          </div>
        </div>
        <div @click="showProduct" class="cardCont">
          <div class="iconfont icon-fuzhi1"></div>
          <div class="cardName" v-if="userInfo.user_info">
            {{ userInfo.user_info.nick_name }}的个人项目作品集({{
              userInfo.works_case.length
            }})
          </div>
          <div class="iconfont icon-jiantou"></div>
        </div>
      </div>
      <div class="mainCont">
        <!-- <div class="mainTitle">明镜止水-个人简历</div> -->
        <div class="stepFrom">
          <div class="stepHead">
            <div class="stepHeadName">个人技能</div>
            <!-- <div class="headOpen">+展开</div> -->
          </div>
          <div class="skillCont">
            <div
              class="sliderItem"
              :key="index"
              v-for="(item, index) in userInfo.skill"
            >
              <div class="sliderHead">
                <div class="sliderName">{{ item.name }}</div>
              </div>
              <div class="sliderCont">
                <van-progress
                  :color="setColorFn(item)"
                  :percentage="item.value"
                  stroke-width="10"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="stepFrom">
          <div class="stepHead">
            <div class="stepHeadName">个人介绍</div>
            <!-- <div class="headOpen">+展开</div> -->
          </div>
          <div class="desCont">
            {{ userInfo.introduce }}
          </div>
        </div>
        <div class="stepFrom">
          <div class="stepHead">
            <div class="stepHeadName">工作经历</div>
            <!-- <div class="headOpen">+展开</div> -->
          </div>
          <div
            class="compItem"
            :key="index"
            v-for="(item, index) in userInfo.work_undergo"
          >
            <div class="compName">
              <div>{{ item.company_name }}</div>
            </div>
            <div class="compTag">
              <div class="compTagItem">
                <div class="iconfont icon-shenfenzheng"></div>
                <div>{{ item.position }}</div>
              </div>
              <div class="compTagItem">
                <div class="iconfont icon-shijian"></div>
                <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
              </div>
            </div>
            <div class="compDes">
              <van-text-ellipsis
                rows="2"
                :content="item.work_content"
                expand-text="展开"
                collapse-text="收起"
              />
            </div>
          </div>
        </div>
        <div class="stepFrom">
          <div class="stepHead">
            <div class="stepHeadName">教育经历</div>
            <!-- <div class="headOpen">+展开</div> -->
          </div>
          <div
            class="compItem"
            :key="index"
            v-for="(item, index) in userInfo.education_undergo"
          >
            <div class="compName">
              <div>{{ item.school_name }}</div>
            </div>
            <div class="compTag flexCont">
              <div class="compTagItem">
                <div class="iconfont icon-shijian"></div>
                <div>{{ item.start_time }} ～ {{ item.end_time }}</div>
              </div>
              <div class="compTagItem">
                <div class="iconfont icon-shenfenzheng"></div>
                <div>{{ item.education }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="stepFrom">
          <div class="stepHead" id="product">
            <div class="stepHeadName">个人作品集</div>
            <!-- <div class="headOpen">+展开</div> -->
          </div>
          <div
            class="productCont"
            :key="index"
            v-for="(item, index) in userInfo.works_case"
          >
            <div class="productHead">
              <div>{{ item.works_name }}</div>
            </div>
            <div class="productDes">项目地址：{{ item.works_url }}</div>
            <div class="productDes">{{ item.works_content }}</div>
            <div class="productImg">
              <div
                @click="showDetailImg(index, item.works_img)"
                :style="'background-image: url(' + item2 + ');'"
                :class="index2 % 4 == 0 ? 'imgItem noLeft' : 'imgItem'"
                :key="index2"
                v-for="(item2, index2) in item.works_img"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-image-preview
      :startPosition="startPosition"
      v-model:show="showVantImg"
      :images="priveImg"
    >
    </van-image-preview>
    <div class="ctrlBtn">
      <div class="addBtn" @click="backFn">
        <span>返回</span>
      </div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { userDetails } from "@/http/api";

import { showToast } from "vant";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      userInfo: {},
      //图片放大查看
      priveImg: [],
      showVantImg: false,
      startPosition: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    showProduct() {
      const targetElement = document.getElementById("product");
      // 使用scrollIntoView方法平滑滚动到目标元素
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: "smooth", // 平滑滚动
        });
      }
    },
    backFn() {
      this.$router.go(-1);
    },
    getYear(time) {
      return new Date().getFullYear() - Number(time.split("-")[0]);
    },
    setColorFn(item) {
      if (item.value <= 20) {
        return "#a6a6a6";
      } else if (item.value <= 40) {
        return "#ffc060";
      } else if (item.value <= 60) {
        return "#5ce1e6";
      } else if (item.value <= 80) {
        return "#2080ff";
      } else if (item.value >= 80) {
        return "#00bf63";
      }
    },
    // 作品图放大显示
    showDetailImg(index, imgs) {
      this.startPosition = index;
      this.priveImg = imgs;
      this.showVantImg = true;
    },
    getData() {
      let data = {
        user_id: this.$route.query.id,
      };
      userDetails(data)
        .then((res) => {
          if (res.data.code == 1) {
            let imgArr = res.data.data.works_case;
            for (let imgItem of imgArr) {
              imgItem.works_img = imgItem.works_img.split(",");
            }
            this.userInfo = res.data.data;
            this.userInfo.works_case = imgArr;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
  },
};
</script>

<style scoped lang="less">
.container {
  background-color: #fff;
  min-height: 100vh;
  .showCont {
    padding-bottom: 1.5rem;
    box-sizing: border-box;
  }
  .headCont {
    background-image: linear-gradient(to bottom, #cbd8f7, #86a9fb);
    padding: 1.75rem 4% 1.75rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .saveCont {
      position: absolute;
      right: 1rem;
      top: 1rem;
      text-align: center;
      color: #fff;
      font-size: 0.6rem;
      .iconfont {
        font-size: 1.2rem;
      }
    }
    .userImg {
      width: 4.4rem;
      height: 4.4rem;
      font-size: 0;
      border-radius: 50%;
      border: 1px solid #fff;
      padding: 0.2rem;
      box-sizing: border-box;
      margin: 0.75rem auto;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .userName {
      font-size: 0.8rem;
      font-weight: bold;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .userTag {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0.25rem 0;
      .workNumTag {
        // background-color: #fff;
        color: #fff;
        border: 1px solid #fff;
        font-size: 0.6rem;
        font-weight: normal;
        padding: 0.1rem 0.75rem;
        border-radius: 0.15rem;
        // margin-left: 0.25rem;
        transform: scale(0.9);
      }
    }
    .userDes {
      text-align: center;
      font-size: 0.6rem;
      margin: 0.35rem 0;
      color: #fff;
    }
    .cardCont {
      padding: 0.75rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 0.25rem;
      margin-top: 0.75rem;
      color: #fff;
      font-size: 0.6rem;
      .cardName {
        margin: 0 0.25rem;
        flex: 1;
        width: 1rem;
      }
    }
    .flexCont {
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        margin-right: 0.25rem;
      }
    }
  }
  .mainCont {
    background-color: #fff;
    position: relative;
    top: -1rem;
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.75rem 4% 0.75rem;
    box-sizing: border-box;
    .mainTitle {
      text-align: center;
      font-size: 0.9rem;
      // font-weight: bold;
      color: #86a9fb;
      padding: 0.75rem 0;
      margin-bottom: 0.75rem;
    }
    .stepFrom {
      padding: 0.75rem 0;
      .stepHead {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .stepHeadName {
          font-weight: bold;
          font-size: 0.75rem;
        }
        .headOpen {
          font-size: 0.65rem;
          color: #86a9fb;
          font-weight: normal;
        }
      }
      .desCont {
        margin-top: 0.75rem;
        background-color: #f1f4fb;
        border-radius: 0.25rem;
        padding: 0.75rem;
        font-size: 0.6rem;
        box-sizing: border-box;
      }
      .skillCont {
        margin-top: 0.75rem;
        // background-color: #f1f4fb;
        border-radius: 0.25rem;
        // padding: 0.75rem;
        box-sizing: border-box;
        .sliderItem {
          width: 100%;
          padding: 0.25rem 0;
          box-sizing: border-box;
          .sliderHead {
            display: flex;
            margin-bottom: 0.25rem;
            justify-content: space-between;
            .compEdit {
              font-weight: normal;
              font-size: 1rem;
            }
          }
        }
      }
      .compItem {
        width: 100%;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        background: #f1f4fb;
        border-radius: 0.25rem;
        margin-top: 0.75rem;
        .compName {
          font-size: 0.7rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
          justify-content: space-between;
          .compEdit {
            font-weight: normal;
            font-size: 1rem;
          }
        }
        .compTag {
          font-size: 0.6rem;
          // display: flex;
          // align-items: center;
          margin: 0.25rem 0;
          color: #333;
          // justify-content: space-between;
          .compTagItem {
            display: flex;
            align-items: center;
            // margin-right: 0.75rem;
            margin-bottom: 0.25rem;
            .iconfont {
              font-size: 0.8rem;
              margin-right: 0.25rem;
            }
            .icon-shijian {
              font-size: 0.7rem;
            }
          }
        }
        .flexCont {
          display: flex;
          justify-content: space-between;
        }
        .compDes {
          font-size: 0.6rem;
          color: #333;
        }
      }
      .productCont {
        width: 100%;
        background-color: #f1f4fb;
        padding: 0.75rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        margin-top: 0.75rem;
        .productHead {
          font-size: 0.7rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          margin-bottom: 0.5rem;
          justify-content: space-between;
          .productEdit {
            font-weight: normal;
            font-size: 1rem;
          }
        }
        .productDes {
          font-size: 0.6rem;
          color: #333;
          margin-bottom: 0.25rem;
        }
        .productImg {
          margin-top: 0.5rem;
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          position: relative;
          .imgItem {
            width: 23.5%;
            overflow: hidden;
            margin-left: 2%;
            display: block;
            height: 3.3rem;
            border-radius: 0.25rem;
            // padding: 0.1rem;
            box-sizing: border-box;
            position: relative;
            border: 0.1rem solid #fff;
            margin-bottom: 0.35rem;
            font-size: 0;
            background-size: cover;
            // img{
            //     // width: 100%;
            //     height: 100%;
            //     border-radius: 0.25rem;
            // }
          }
          .noLeft {
            margin-left: 0;
          }
        }
      }
    }
  }
  .ctrlBtn {
    width: 100%;
    background-color: #fff;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    .addBtn {
      flex: 1;
      width: 2rem;
      line-height: 2.2rem;
      letter-spacing: 0.1rem;
      text-align: center;
      font-size: 0.7rem;
      // color:#86a9fb;
      background-color: #86a9fb;
      color: white;
      border-radius: 0.25rem;
    }
  }
}
</style>
